import React, { Fragment, Component } from "react";
import Topnav from "./Topnav";
import SearchBtn from "@/components/SearchBtn";
import Content from "./Content";
import { connect } from "react-redux";
import * as actions from "@/store/classify/actions";

class Classify extends Component {
  state = {
    topCurrentIndex: 0,
    currentIndexName: ["烘焙", "其他"],
  };
  componentDidMount() {
    this.props.getCdataAction();
  }

  setTopCurrentIndex = (topCurrentIndex) => {
    this.setState({ topCurrentIndex });
  };
  setCurrentIndexName = (currentIndexName) => {
    // eslint-disable-next-line
    this.state.currentIndexName[this.state.topCurrentIndex] = currentIndexName;
    this.setState({});
  };

  render() {
    const { topCurrentIndex, currentIndexName } = this.state;
    return (
      <Fragment>
        <Topnav
          topCurrentIndex={topCurrentIndex}
          setTopCurrentIndex={this.setTopCurrentIndex}
        ></Topnav>
        <SearchBtn onClick={() => this.props.history.push("/search")} />
        {this.props.cdata.category && (
          <Content
            key={"" + topCurrentIndex}
            topCurrentIndex={topCurrentIndex}
            currentIndexName={currentIndexName[topCurrentIndex]}
            setCurrentIndexName={this.setCurrentIndexName}
            data={
              this.props.cdata[topCurrentIndex === 0 ? "category" : "material"]
            }
          ></Content>
        )}
      </Fragment>
    );
  }
}

export default connect((state) => state.classify.toJS(), actions)(Classify);
